<template>
    <el-scrollbar>
        <div class="px-[10px] pt-[15px] pb-[20px]">
            <div
                class="grid grid-flow-row grid-cols-2 gap-x-[12px] gap-y-[18px]"
            >
                <div
                    v-for="(node, index) in nodes"
                    :key="node.icon + index"
                    class="border-dashed cursor-move border-[1px] border-[#565758] rounded-[8px] px-[8px] py-[10px]"
                    draggable="true"
                    @dragstart="() => dragStart(node)"
                >
                    <div
                        class="flex flex-row items-center gap-[10px]"
                    >
                        <i
                            class="iconfont text-[17px] text-[#191919]"
                            :class="node.icon"
                        />
                        <div
                            class="text-[16px] leading-[1.2] text-[#191919] font-500"
                        >
                            {{ node.nodeName }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </el-scrollbar>
</template>
<script setup>
import mittBus from '@/utils/mittbus';
const nodes = ref([
    {
        type: 'start',
        editable: false,
        nodeName: '开始',
        icon: 'icon-start-l',
    },
    {
        type: 'end',
        editable: false,
        nodeName: '结束',
        icon: 'icon-end-l',
    },
    {
        type: 'node',
        editable: true,
        nodeName: '检伤',
        icon: 'icon-triage',
    },
    {
        type: 'node',
        editable: true,
        nodeName: '诊断',
        icon: 'icon-diagnose-l',
    },
]);
const dragStart = (node) => {
    mittBus.emit('drag-start', node);
};
</script>
